<template>
  <div class="cart">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">购物车</div>
    </div>
    <div
      class="gl_cart"
      v-show="
        $store.getters.xianShi.flag == true ||
        $store.getters.xianShi.flag2 == false
      "
    >
      <div class="guan_li" v-show="$store.getters.xianShi.flag1">
        <div v-show="true">
          <input type="checkbox" name="danxuan_anniu" id="danxuan_anniu" @click="quanXun($event)" 
          v-model="$store.getters.every.flag" />
          <label for="danxuan_anniu">
            <span class="iconfont icon-gou"></span>
          </label>
          <span>全选</span>
        </div>
        <span v-show="flag1 == true" @click="guan_li()">管理</span>
        <div v-show="flag1 == false">
          <span @click="wanChen()">完成</span>
          <span @click="shanChu()">删除</span>
        </div>
      </div>
      <div
        class="shang_ping"
        v-for="(item, index) in $store.state.arr"
        :key="index"
      >
        <input
          type="checkbox"
          name="duo_xuan"
          :id="'duoxuan_anniu' + index"
          v-model="item.flag"
        />
        <!-- flag1 == false -->
        <label :for="'duoxuan_anniu' + index" v-show="true">
          <span class="iconfont icon-gou"></span>
        </label>
        <div class="pic_img">
          <img :src="item.img" alt="" />
        </div>
        <div class="sp_title">
          <router-link to="/Gdetails" @click.native="jumpXq(item.img,item.title,item.dazhe,item.price)">{{ item.title }}</router-link>
          <div>
            <div>
              <span>￥{{ item.price }}</span>
            </div>
            <div v-show="flag1 == true">
              <button
                @click="cartJian(item.img, item.title, item.num, item.price)"
              >
                -
              </button>
              <span>{{ item.num }}</span>
              <button
                @click="cartJia(item.img, item.title, item.num, item.price)"
              >
                +
              </button>
            </div>
          </div>
        </div>
        <div
      class="jie_suan"
      v-show="flag1 && $store.getters.xianShi.flag"
    >
      <div>
        <span>￥{{$store.getters.zhongJia}}</span>
        <router-link to="" @click.native="jieSuan()"> 结算 </router-link>
      </div>
    </div>

    <div class="tan_chu" v-show="flag2">
      <span>亲，你忍心删除这{{$store.getters.every.j}}商品？</span>
      <div>
        <span @click="queDin()">确定</span>
        <span @click="qunXiao()">取消</span>
      </div>
    </div>

      </div>
    </div>

    

    <!-- 继续购物  flag2==true-->
    <div class="gou_wu" v-show="$store.getters.xianShi.flag2 == true">
      <img src="../../public/picture/sousuo/gw.png" alt="" />
      <router-link to="/Sousuo"> 继续购物 </router-link>
    </div>

    <span v-show="flag3"> 该商品不能再减了哟 </span>
    <span v-show="flag4">亲，你还没选中商品哟</span>

  </div>
</template>

<script>
export default {
  data() {
    return {
      arr:[],
      flag: false,
      flag1: true,
      //删除显示
      flag2: false,
      // 删除显示
      flag3: false,
      // 没有选中时的提示
      flag4:false,
      /* obj:'', */
    };
  },
  methods: {
    guan_li() {
      this.flag1 = !this.flag1;
      this.flag = !this.flag;
    },
    wanChen(){
      this.flag1 = !this.flag1;
      this.flag = !this.flag;
      for(var i=0;i<this.$store.state.arr.length;i++){
        this.$store.state.arr[i].flag=false
      }
    },
    shanChu() {
      for(var i=0,j=0;i<this.$store.state.arr.length;i++){
        if(this.$store.state.arr[i].flag==true){
          j+=1;
        }
      }
      if(j==0){
        this.flag4=true;
        setTimeout(()=>{
          this.flag4=false;
        },500)
      }else{
        this.flag2 = !this.flag2;
      }
    },
    fanHui() {
      window.history.go(-1);
    },
    // 加
    cartJia(img, title, num, price) {
      num++;
      var jiaShu = {
        img: img,
        title: title,
        num: num,
        price: price,
      };
      this.$store.commit("cartJia", jiaShu);
    },
    // 减
    cartJian(img, title, num, price) {
      if (num == 1) {
        this.flag3 = true;
        setTimeout(() => {
          this.flag3 = false;
        }, 500);
      } else {
        num--;
        var jianShu = {
          img: img,
          title: title,
          num: num,
          price: price,
        };
        this.$store.commit("cartJia", jianShu);
      }
    },
    // 全选
    quanXun(ev){
      if(ev.target.checked){
        for(var i=0;i<this.$store.state.arr.length;i++){
          this.$store.state.arr[i].flag=true;
        }
      }else{
        for(var i=0;i<this.$store.state.arr.length;i++){
          this.$store.state.arr[i].flag=false;
        }
      }
    },
    // 取消
    qunXiao(){
      this.flag2 = false
    },
    // 确定删除
    queDin(){
      var arr=[];
      for(var i=0;i<this.$store.state.arr.length;i++){
        if(!this.$store.state.arr[i].flag){
          arr.push(this.$store.state.arr[i])
        }
      }
      this.$store.state.arr=arr;
      this.flag2 = false;
      this.flag1=true;
    },
    // 结算
    jieSuan(){
      if(this.$store.getters.every.j!=0){
        var obj=[];
        this.flag4=false;
        for(var i=0;i<this.$store.state.arr.length;i++){
          if(this.$store.state.arr[i].flag){
            obj.push(this.$store.state.arr[i])
          }
        }
        this.$router.push('/Balance');
        this.$store.commit('jieSuan',obj);
      }else{
        this.flag4=true;
        setTimeout(()=>{
          this.flag4=false;
        },500)
      }
    },
    jumpXq(img,title,dazhe,price){
      var xqShu={
        img:img,
        title:title,
        title1:dazhe,
        title2:price,
      }
      localStorage.setItem('xqXx',JSON.stringify(xqShu));
    }
  },
  
  mounted() {
  },
};
</script>

<style lang="less" scoped>
.cart {
  .tan_chu {
    height: 2.133333rem;
    width: 5.866667rem;
    background: rgba(204, 204, 204, 0.5) !important;
    position: fixed;
    left: 50%;
    top: 45%;
    transform: translateX(-50%);
    border-radius: 5px;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    > span {
      font-size: 15px;
    }
    > div {
      width: 100%;
      display: flex;
      flex-flow: row;
      justify-content: space-around;
      align-items: center;
      > :first-child {
        color: #ffffff;
        background: #de0a2b;
        padding: 0.213333rem 0.4rem;
        border-radius: 3px;
      }
      > :last-child {
        padding: 0.213333rem 0.4rem;
        border-radius: 3px;
        color: #000;
        background: #ffffff;
      }
    }
  }

  > span {
    position: fixed;
    left: 50%;
    bottom: 20%;
    color: #000;
    line-height: 0.7rem;
    width: 3.5rem;
    border-radius: 10px;
    height: 0.7rem;
    text-align: center;
    background: #ffffff;
    transform: translateX(-50%);
  }

  .gl_cart {
    margin-top: 45px;
    margin-bottom: 50px;
    background: #ffffff;
    .guan_li {
      border-bottom: 1px solid #e5e5e5;
      padding: 0px 0.266667rem;
      width: 100%;
      height: 1.12rem;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      > span {
        position: absolute;
        right: 0.533333rem;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        width: 1.066667rem;
        text-align: center;
        height: 1.12rem;
        line-height: 1.12rem;
        margin-right: 0.133333rem;
      }
      > :first-child {
        display: flex;
        align-items: center;
        > label {
          height: 100%;
          display: block;
          > span {
            cursor: pointer;
            font-size: 25px;
            color: #c7c4c4;
          }
        }
        > span {
          font-size: 16px;
          color: #59607b;
        }
        >input{
          position: absolute;
          width: 20px;
          height: 20px;
          opacity: 0;
        }
        > input:checked + label>span {
          color: #de0a2b;
        }
      }
      > :last-child {
        > span {
          text-align: center;
          line-height: 0.72rem;
          width: 1.44rem;
          height: 0.72rem;
          margin: 0px 0.133333rem;
          display: inline-block;
          font-size: 14px;
          cursor: pointer;
          border-radius: 2px;
          color: #353535;
          border: 1px solid #353535;
        }
      }
    }
    .shang_ping {
      padding: 0.133333rem 0.266667rem;
      border-bottom: 1px solid #e5e5e5;
      width: 100%;
      display: flex;
      align-items: center;
      flex-flow: row;
      > label {
        width: 20px;
        height: 20px;
        background-color: #fff;
        > span {
          cursor: pointer;
          font-size: 25px;
          color: #c7c4c4;
        }
      }
      > input {
        position: absolute;
        left: 0.32rem;
        width: 0.586667rem;
        height: 0.586667rem;
        opacity: 0;
      }
      > input:checked + label > span {
        color: #de0a2b;
      }
      .pic_img {
        width: 20%;
        margin-right: 0.266667rem;
        // height: 100%;
        padding: 0.133333rem;
        img {
          width: 100%;
          // height: 100%;
        }
      }
      .sp_title {
        width: 80%;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        > a {
          font-size: 13px;
          color: #353535;
          margin-bottom: 0.133333rem;
        }
        > div {
          margin-top: 0.133333rem;
          display: flex;
          flex-flow: row;
          justify-content: space-between;
          align-items: center;
          > :first-child {
            font-size: 14px;
            color: #de0a2b;
          }
          > :last-child {
            display: flex;
            align-items: center;
            button {
              text-align: center;
              line-height: 0.56rem;
              outline: none;
              border: none;
              width: 0.56rem;
              height: 0.56rem;
              border-radius: 2px;
              background: #f1f1f1;
              color: #878787;
              font-size: 16px;
            }
            span {
              font-size: 14px;
              text-align: center;
              line-height: 0.56rem;
              background: #f1f1f1;
              display: inline-block;
              margin: 0px 0.133333rem;
              height: 0.56rem;
              width: 0.8rem;
            }
          }
        }
      }
    }
  }
  .jie_suan {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
    background: #ffffff;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    > div {
      > :first-child {
        display: inline-block;
        height: 100%;
        line-height: 50px;
        margin-right: 0.266667rem;
        color: #de0a2b;
        font-size: 14px;
      }
      > :last-child {
        font-size: 16px;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        width: 2.133333rem;
        background-color: #c20430;
        color: #ffffff;
      }
    }
  }

  .gou_wu {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-flow: column;
    align-items: center;
    > img {
      width: 2.666667rem;
      height: 2.666667rem;
    }
    > a {
      font-size: 15px;
      margin-top: 0.533333rem;
      background: #e64461;
      display: block;
      color: #ffffff;
      width: 3.2rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
    }
  }
}
</style>